<script setup>
import { computed } from 'vue'

const props = defineProps({
  // 标签数据数组
  tags: {
    type: Array,
    default: () => []
  },
  // 标签类型对应的字段名
  typeField: {
    type: String,
    default: 'type'
  },
  // 标签文本对应的字段名
  textField: {
    type: String,
    default: 'text'
  },
  // 默认标签类型
  defaultType: {
    type: String,
    default: 'info'
  },
  // 每个标签的点击事件
  clickable: {
    type: Boolean,
    default: false
  },
  // 标签最大显示数量，超出的会收起
  maxCount: {
    type: Number,
    default: 0 // 0 表示显示所有
  },
  // 自定义标签间距
  gap: {
    type: String,
    default: '2'
  },
  // 自定义标签尺寸
  size: {
    type: String,
    default: 'default' // large/default/small
  }
})

const emit = defineEmits(['tag-click'])

// 类型映射转换（可以将代码值转换为element-plus的类型）
const typeMap = {
  'primary': 'primary',
  'success': 'success',
  'warning': 'warning',
  'danger': 'danger',
  'info': 'info',
  
  // 添加业务相关的映射，例如状态码到类型的映射
  '1': 'success', // 例如：状态1映射为success类型
  '0': 'danger',  // 例如：状态0映射为danger类型
  'ROLE_SUPER_ADMIN': 'danger',  // 系统管理员
  'ROLE_BUSINESS_STAFF': 'primary', // 业务员
  'ROLE_OPERATOR': 'warning',  // 操作员
  'ROLE_MANAGER': 'success',  // 负责人
  'ROLE_FINANCE': 'info'  // 财务员
}

// 根据最大数量限制显示的标签
const visibleTags = computed(() => {
  if (!props.maxCount || props.tags.length <= props.maxCount) {
    return props.tags
  }
  return props.tags.slice(0, props.maxCount)
})

// 是否有额外隐藏的标签
const hasMoreTags = computed(() => {
  return props.maxCount > 0 && props.tags.length > props.maxCount
})

// 隐藏的标签数量
const hiddenTagsCount = computed(() => {
  return props.tags.length - props.maxCount
})

// 获取标签文本
const getTagText = (tag) => {
  console.log('处理标签:', tag)
  // 如果tag是字符串，直接返回
  if (typeof tag === 'string') {
    return tag
  }
  
  // 如果tag是对象且有指定的文本字段，返回该字段值
  if (typeof tag === 'object' && tag !== null) {
    // 尝试直接访问指定的文本字段
    let text = tag[props.textField]
    
    // 如果文本字段是一个嵌套路径 (如 "user.name")，尝试遍历对象
    if (!text && props.textField.includes('.')) {
      const parts = props.textField.split('.')
      let current = tag
      for (const part of parts) {
        if (current && typeof current === 'object') {
          current = current[part]
        } else {
          current = undefined
          break
        }
      }
      text = current
    }
    
    // 如果字段存在且不是对象，则返回该值
    if (text !== undefined && typeof text !== 'object') {
      return text
    }
    
    // 如果对象有name或label字段，优先返回这些
    if (tag.name) return tag.name
    if (tag.label) return tag.label
    if (tag.title) return tag.title
    if (tag.text) return tag.text
    
    // 检查常见的嵌套结构
    if (tag.data && tag.data.name) return tag.data.name
    if (tag.info && tag.info.name) return tag.info.name
  }
  
  // 无法提取文本时返回标识
  return 'Unknown'
}

// 获取标签类型
const getTagType = (tag) => {
  // 如果tag是字符串，直接查找映射
  if (typeof tag === 'string') {
    return typeMap[tag] || props.defaultType
  }
  
  // 如果tag是对象且有指定的类型字段，使用该字段查找映射
  if (typeof tag === 'object' && tag !== null) {
    // 尝试直接访问指定的类型字段
    let tagType = tag[props.typeField]
    
    // 如果类型字段是一个嵌套路径 (如 "data.type")，尝试遍历对象
    if (!tagType && props.typeField.includes('.')) {
      const parts = props.typeField.split('.')
      let current = tag
      for (const part of parts) {
        if (current && typeof current === 'object') {
          current = current[part]
        } else {
          current = undefined
          break
        }
      }
      tagType = current
    }
    
    if (tagType && typeMap[tagType]) {
      return typeMap[tagType]
    }
    
    // 如果有特定字段，尝试使用它们
    if (tag.type && typeMap[tag.type]) return typeMap[tag.type]
    if (tag.status && typeMap[tag.status]) return typeMap[tag.status]
    if (tag.code && typeMap[tag.code]) return typeMap[tag.code]
    
    // 检查常见的嵌套结构
    if (tag.data && tag.data.code && typeMap[tag.data.code]) return typeMap[tag.data.code]
  }
  
  // 默认返回默认类型
  return props.defaultType
}

// 处理标签点击
const handleTagClick = (tag, index) => {
  if (props.clickable) {
    emit('tag-click', tag, index)
  }
}
</script>

<template>
  <div :class="`flex gap-${gap} flex-wrap`">
    <template v-if="tags.length > 0">
      <el-tag
        v-for="(tag, index) in visibleTags"
        :key="index"
        :type="getTagType(tag)"
        :size="size"
        :class="{ 'cursor-pointer': clickable }"
        @click="handleTagClick(tag, index)"
      >
        {{ getTagText(tag) }}
      </el-tag>
      
      <el-tag v-if="hasMoreTags" type="info" :size="size" class="more-tag">
        +{{ hiddenTagsCount }}
      </el-tag>
    </template>
    
    <template v-else>
      <slot name="empty">
        <span class="text-gray-400 text-sm">无标签</span>
      </slot>
    </template>
  </div>
</template>

<style scoped>
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.cursor-pointer {
  cursor: pointer;
}

.text-gray-400 {
  color: #9ca3af;
}

.text-sm {
  font-size: 0.875rem;
}

.more-tag {
  cursor: default;
}
</style> 